<template>
    <div>
        <el-form ref="form" :model="obj.data" label-width="100px">
            <el-form-item label="演练主题" prop="title" :rules="[formRulesMixin.notNull]">
                <el-input v-model="obj.data.title" clearable autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="演练内容" prop="msg" :rules="[formRulesMixin.notNull]">
                <el-input v-model="obj.data.msg" clearable autocomplete="off" type="textarea" rows="5"></el-input>
            </el-form-item>
            <el-form-item label="起止时间">
                <DateRange v-model:start="obj.data.starttime" v-model:end="obj.data.endtime" sph="起始时间" eph="结束时间"
                type="datetimerange" format="YYYY-MM-DD HH:mm" valueformat="YYYY-MM-DD HH:mm" :width="330" :disabledDate="setDate" />
            </el-form-item>
            <el-form-item label="选择物业员工" v-if="!obj.data.drill_id">
                <div class="checkboxgroup">
                    <div v-for="(a,a_index) in obj.property_all" :key="a_index">
                        <div v-if="a.sub&&a.sub.length" class="item mb10">
                            <div class="flex-row-center">
                                <el-checkbox v-model="a.checked" :indeterminate="a.indeterminate" class="checkbox1" @change="itemChange($event, a)">{{a.label}}</el-checkbox>
                                <div :class="[a.chirldShow?'bottom_icon':'right_icon', 'pointer', 'ml5', 'mini-gray-size']" @click="a.chirldShow=!a.chirldShow"></div>
                            </div>
                            <div class="subdiv" v-show="a.chirldShow">
                                <div class="subitem" v-for="(b,b_index) in a.sub" :key="b_index">
                                    <el-checkbox v-model="b.checked" @change="subItemChange($event, b, a)" class="checkbox1">{{b.name}}</el-checkbox>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="优先级" prop="priority" :rules="[formRulesMixin.notNull]">
                <el-select v-model="obj.data.priority" placeholder="选择优先级" class="search_select" clearable>
                    <el-option v-for="(item,index) in globalData.priorityList" :key="index" :label="item.text" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item class="dialog-btns-item">
                <div class="dialog-btns">
                    <span class="btn clear" @click="$emit('close')">取消</span>
                    <span class="btn sub ml10" @click.prevent="upData">提交</span>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
    import { reactive,ref,getCurrentInstance,toRaw,inject } from 'vue'
    import DateRange from '@/components/date_range.vue'
    let { proxy } = getCurrentInstance()
    let obj = reactive({
        data:{
            drill_id: inject("id").value || 0,
            title: "",
            msg:"",
            starttime:"",
            endtime: "",
            userids: [],
            priority:"",
        },
        property_all:[],
    })

    let setDate = d => { return d <= proxy.$utils.dateAddDay(new Date(), -1) }
    let init = () => {
        setusers()
        if(obj.data.drill_id > 0){
            proxy.$ajax({
                url: 'drill/get',
                data: {drill_id:obj.data.drill_id},
                bfLoading: true
            }).then(d => {
                if(d.success){
                    obj.data = {...obj.data, ...d.msg}
                    obj.data.priority = parseInt(obj.data.priority)
                }else{
                    proxy.elMessageMixin(d.err, 'error')
                }
            }).catch(() => { })
        }
    }

    let setusers = async ()=>{
        let arr = await proxy.$utils.getProperty(proxy, '')
        // 0 行政 1 保洁 2 安保 3 客服 4 维修
        let menu = [
            {label: '行政', value: 0, checked: false, indeterminate:false, sub: []},
            {label: '保洁', value: 1, checked: false, indeterminate:false, sub: []},
            {label: '安保', value: 2, checked: false, indeterminate:false, sub: []},
            {label: '客服', value: 3, checked: false, indeterminate:false, sub: []},
            {label: '维修', value: 4, checked: false, indeterminate:false, sub: []}
        ]
        arr.map(e=>{
            e.checked = e.checked||false
            e.chirldShow = false
            console.log(menu[e.type]);
            menu[e.type].sub.push(e)
        })
        console.log(menu);
        obj.property_all = menu
    }

    let itemChange = (e, item) => {
        item.indeterminate = false
        item.sub.forEach(t => {
            t.checked = e
        })
    }
    let subItemChange = (e, item, parent) => { //有一项选中，顶部就半选中
        item.checked = e //0-未选中，1-选中；2-部分选中
        parent_check(parent)
    }

    let parent_check = parent => { //判断顶部状态
        let x = []
        parent.sub.forEach(t => {
            x.push(t.checked)
        })
        if(x.every(p => p)){ //全部选中就选中，否则就是没选中
            parent.indeterminate = false
            parent.checked = true
        } else if (x.every(p => !p)){
            parent.indeterminate = false
            parent.checked = false
        }else{
            parent.indeterminate = true
        }
    }
    init()

    let upData = () => {
        proxy.$refs['form'].validate(valid => {
            if (valid) {
                let userids = []
                obj.property_all.forEach(e=>{
                    let u = e.sub||[]
                    u.forEach(ev=>{
                        if(ev.checked){
                            userids.push(+ev.property_id)
                        }
                    })
                })
                let param = {
                    ...obj.data,
                    userids
                }
                console.log(param);
                // return
                proxy.$ajax({
                    url: 'drill/design',
                    data: param,
                    bfLoading: true,
                }).then(d => {
                    if(d.success){
                        proxy.elMessageMixin(`${obj.data.drill_id>0?'修改':"添加"}成功`, 'success')
                        proxy.$emit('init')
                        proxy.$emit('close')
                    }else{
                        proxy.elMessageMixin(d.err, 'error')
                    }
                }).catch(() => { })
            }else{
                return false
            }
        })
    }
</script>

<style scoped>
    .checkboxgroup { padding-top: 5px; }
    .checkbox1 { height:22px; font-weight: normal; }
    .item { line-height: 0; }
    .subdiv { display: flex; flex-wrap: wrap; padding-left: 20px; }
    .subitem { padding-left:10px; }
    .subsubitem { padding-left: 30px; }
</style>